<template>
  <div class="app-container">
  <el-button @click="getList" style="margin-left: 5px;margin-bottom: 10px" type="primary" icon="el-icon-refresh" >刷新</el-button>
  <el-button @click="handleDownload" :loading="exportBtn" v-if="total >0" style="margin-left: 5px;margin-bottom: 10px" type="primary" icon="el-icon-download" >导出</el-button>
  <el-table
    :key="tableKey"
    ref="balance-records"
    :loading="listLoading"
    :data="list"
    border
    fit
    highlight-current-row
    stripe
    style="margin-left: 5px;"
  >
    <el-table-column
      type="index"
      align="center"
      label="#"
      width="50">
    </el-table-column>
    <el-table-column align="center" label="名称">
      <template v-slot="{row}">
        <span>{{ row.source_type | sourceType }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="单据号">
      <template v-slot="{row}">
        <span>{{ row.source_sn }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="上次余额">
      <template v-slot="{row}">
        <span>{{ row.last_amount }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="缴费/退费">
      <template v-slot="{row}">
        <span>{{ row.change_amount }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="余额">
      <template v-slot="{row}">
        <span>{{ row.amount}}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="时间">
      <template v-slot="{row}">
        <span>{{ formatDate(row.create_date)}}</span>
      </template>
    </el-table-column>
    <el-table-column align="left" label="备注">
      <template v-slot="{row}">
        <span>{{ row.remark}}</span>
      </template>
    </el-table-column>
     <el-table-column
        align="center"
        width="80px"
        label="操作" >
        <template v-slot="{row}">
          <el-button  circle icon="el-icon-printer" title="打印收据" type="primary"
                      @click="handlePrint(row)" size="mini" />
        </template>
      </el-table-column>
  </el-table>

  <pagination v-show="total>0" :limit.sync="listQuery.pageSize" :page.sync="listQuery.page" :total="total"
              @pagination="getList"/>
    <el-dialog title="收据打印" :visible.sync="dialogFormVisible" :append-to-body="true"
               custom-class="window-small-width">
      <el-form ref="printPaymentForm" :model="form.model" :rules="form.rules" label-position="right" label-width="80px"
      >
        <el-form-item label="开票人" prop="invoice_user">
          <el-input v-model="form.model.invoice_user"  class="filter-item"/>
        </el-form-item>
        <el-form-item label="收款单位" prop="company_name">
          <el-input v-model="form.model.company_name"  class="filter-item"/>
        </el-form-item>
        <el-form-item label="收款事项" prop="remark">
          <el-input v-model="form.model.reason"  class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button :loading="printBtn" type="primary" @click=" printReceipt">
          打印
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped lang="scss">

</style>
<script>
import Pagination from "@/components/Pagination/index.vue";
import {fetchBalanceRecordList,downloadBalanceRecord,downloadPaymentReceipt} from "@/api/finance";
import moment from "moment";
import {mapGetters} from "vuex";

export default {
  name: 'BalanceRecordList',
  components: {Pagination},
  props:{
    device_id: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      tableKey: 0,
      listLoading: true,
      exportBtn: false,
      printBtn: false,
      dialogFormVisible:false,
      list: [],
      total: 0,
      listQuery: {
        device_id: 0,
        page: 1,
        pageSize: 20,
      },
      form:{
       model:{
         id:0,
         invoice_user:'',
         company_name:'',
         reason:''
       },
        rules:{}
      },
    };
  },
  watch: {
    device_id:{
      immediate:true,
      handler(val){
          this.listQuery.device_id = val
          this.getList()
        }
      }
  },
  filters: {
    sourceType(val) {
      let t = {
        1: '柜台缴费',
        2: '小程序充值',
        3: '水费结算',
        4: '柜台退费'
      }
      return t[val]
    }
  },
  computed: {
    ...mapGetters([
      'setting'
    ])
  },
  methods: {
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm:ss')
    },
    getList() {
      if(this.device_id > 0) {
        this.listLoading = true
        this.listQuery.device_id = this.device_id
        fetchBalanceRecordList(this.listQuery).then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    handleDownload(){
      this.exportBtn = true
      downloadBalanceRecord(this.listQuery).then(resp => {
        this.exportBtn = false
        this.$message.success('导出成功')
        this.$nextTick(() => {
          const url = window.URL.createObjectURL(new Blob([resp.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', '余额明细.xlsx'); // 设置下载文件名
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
      })
    },
    printReceipt() {
      this.printBtn = true
      downloadPaymentReceipt(this.form.model).then(resp => {
        this.printBtn = false
        this.$message.success('收据附件生成完成')
        this.$nextTick(() => {
          const url = window.URL.createObjectURL(new Blob([resp.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', '收据.pdf'); // 设置下载文件名
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
      }).catch(error => {
        this.printBtn = false
        this.$message.error(error.message)
      })
    },
    handlePrint(row) {
      this.dialogFormVisible = true;
      this.form.model.id = row.id
      this.form.model.invoice_user = this.setting.invoice.invoice_user
      this.form.model.company_name = this.setting.invoice.company_name
      this.form.model.reason = this.setting.invoice.reason
    }
  }
}
</script>
